<div class="content-heading">Product #000123</div>
<form class="panel">
    <tabset [justified]="true">
        <tab>
            <ng-template tabHeading>Product Edit</ng-template >
            <div>
                <fieldset>
                    <div class="form-group">
                        <label class="col-md-2 control-label">Name:</label>
                        <div class="col-md-10">
                            <input class="form-control" type="text" placeholder="Product name.." />
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <div class="form-group">
                        <label class="col-md-2 control-label">Description:</label>
                        <div class="col-md-10">
                            <textarea class="form-control" cols="5" placeholder="Short description.."></textarea>
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <div class="form-group">
                        <label class="col-md-2 control-label">Price:</label>
                        <div class="col-md-10">
                            <input class="form-control" type="text" placeholder="$ 123.20" />
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <div class="form-group">
                        <label class="col-md-2 control-label">Quantity:</label>
                        <div class="col-md-10">
                            <input class="form-control" type="number" placeholder="0" min="0" />
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <div class="form-group">
                        <label class="col-md-2 control-label">Tax :</label>
                        <div class="col-md-10">
                            <input class="form-control" type="text" placeholder="20%" />
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <div class="form-group">
                        <label class="col-md-2 control-label">Status:</label>
                        <div class="col-md-10">
                            <select class="form-control">
                                <option value="">Select..</option>
                                <option value="0">Public</option>
                                <option value="1">Pending</option>
                            </select>
                        </div>
                    </div>
                </fieldset>
            </div>
        </tab>
        <tab>
            <ng-template tabHeading>SEO Metadata</ng-template >
            <div>
                <fieldset>
                    <div class="form-group">
                        <label class="col-md-2 control-label">Title</label>
                        <div class="col-md-10">
                            <input class="form-control" type="text" placeholder="Brief description.." />
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <div class="form-group">
                        <label class="col-md-2 control-label">Description</label>
                        <div class="col-md-10">
                            <textarea class="form-control" rows="5" placeholder="Max 255 characters..."></textarea>
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <div class="form-group">
                        <label class="col-md-2 control-label">Keywords</label>
                        <div class="col-md-10">
                            <textarea class="form-control" rows="5" placeholder="Max 1000 characters..."></textarea>
                        </div>
                    </div>
                </fieldset>
            </div>
        </tab>
        <tab>
            <ng-template tabHeading>Pictures</ng-template >
            <div>
                <div class="row mb-lg">
                    <div class="col-xs-3">
                        <strong>Preview</strong>
                    </div>
                    <div class="col-xs-9">
                        <strong>Details</strong>
                    </div>
                </div>
                <div class="row mb-lg pb-lg bb">
                    <div class="col-xs-6 col-sm-3">
                        <a href="#" title="Product 1">
                            <img class="img-responsive" src="assets/img/bg7.jpg" alt="Product 1" />
                        </a>
                    </div>
                    <div class="col-xs-6 col-sm-9">
                        <fieldset>
                            <div class="form-group">
                                <input class="form-control" type="text" placeholder="Brief description.." />
                            </div>
                        </fieldset>
                        <p>
                            <strong>Picture type</strong>
                        </p>
                        <div class="radio c-radio c-radio-nofont">
                            <label>
                                <input type="radio" name="prod1-pic" value="option1" checked="" />
                                <span></span>Primary</label>
                        </div>
                        <div class="radio c-radio c-radio-nofont">
                            <label>
                                <input type="radio" name="prod1-pic" value="option2" />
                                <span></span>Thumbnail</label>
                        </div>
                        <div class="radio c-radio c-radio-nofont">
                            <label>
                                <input type="radio" name="prod1-pic" value="option3" />
                                <span></span>Gallery</label>
                        </div>
                        <div class="text-right">
                            <button class="btn btn-sm btn-danger" type="button">
                                <em class="fa fa-times-circle fa-fw"></em>Remove</button>
                        </div>
                    </div>
                </div>
                <div class="row mb-lg pb-lg bb">
                    <div class="col-xs-6 col-sm-3">
                        <a href="#" title="Product 2">
                            <img class="img-responsive" src="assets/img/bg8.jpg" alt="Product 1" />
                        </a>
                    </div>
                    <div class="col-xs-6 col-sm-9">
                        <fieldset>
                            <div class="form-group">
                                <input class="form-control" type="text" placeholder="Brief description.." />
                            </div>
                        </fieldset>
                        <p>
                            <strong>Picture type</strong>
                        </p>
                        <div class="radio c-radio c-radio-nofont">
                            <label>
                                <input type="radio" name="prod2-pic" value="option1" checked="" />
                                <span></span>Primary</label>
                        </div>
                        <div class="radio c-radio c-radio-nofont">
                            <label>
                                <input type="radio" name="prod2-pic" value="option2" />
                                <span></span>Thumbnail</label>
                        </div>
                        <div class="radio c-radio c-radio-nofont">
                            <label>
                                <input type="radio" name="prod2-pic" value="option3" />
                                <span></span>Gallery</label>
                        </div>
                        <div class="text-right">
                            <button class="btn btn-sm btn-danger" type="button">
                                <em class="fa fa-times-circle fa-fw"></em>Remove</button>
                        </div>
                    </div>
                </div>
                <div class="row mb-lg pb-lg">
                    <div class="col-xs-6 col-sm-3">
                        <a href="#" title="Product 3">
                            <img class="img-responsive" src="assets/img/bg10.jpg" alt="Product 1" />
                        </a>
                    </div>
                    <div class="col-xs-6 col-sm-9">
                        <fieldset>
                            <div class="form-group">
                                <input class="form-control" type="text" placeholder="Brief description.." />
                            </div>
                        </fieldset>
                        <p>
                            <strong>Picture type</strong>
                        </p>
                        <div class="radio c-radio c-radio-nofont">
                            <label>
                                <input type="radio" name="prod3-pic" value="option1" checked="" />
                                <span></span>Primary</label>
                        </div>
                        <div class="radio c-radio c-radio-nofont">
                            <label>
                                <input type="radio" name="prod3-pic" value="option2" />
                                <span></span>Thumbnail</label>
                        </div>
                        <div class="radio c-radio c-radio-nofont">
                            <label>
                                <input type="radio" name="prod3-pic" value="option3" />
                                <span></span>Gallery</label>
                        </div>
                        <div class="text-right">
                            <button class="btn btn-sm btn-danger" type="button">
                                <em class="fa fa-times-circle fa-fw"></em>Remove</button>
                        </div>
                    </div>
                </div>
            </div>
        </tab>
    </tabset>
</form>
<div class="text-right mt-lg">
    <button class="btn btn-warning" type="button">Discard</button>
    <button class="btn btn-success" type="button">Save</button>
</div>
